<template>
    <div>
        <Row class="formRow">
          <Col span="1" class="rightRow">
            <span class="ModelInputTitle">昵称</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.nickname" placeholder="昵称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="1" class="rightRow">
            <span class="ModelInputTitle">姓名</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.name" placeholder="姓名" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="1" class="rightRow">
            <span class="ModelInputTitle">身份证号</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.idNumber" placeholder="身份证号" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="1" class="rightRow">
            <span class="ModelInputTitle">手机号</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.phone" placeholder="手机号" clearable style="width:100%" size="large"></Input>
          </Col>
          <Col span="1" class="rightRow">
            <span class="ModelInputTitle">性别</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.sex">
              <Option  value="1" >男</Option>
              <Option  value="0" >女</Option>
            </Select>
          </Col>
          <Col span="1" class="rightRow">
            <span class="ModelInputTitle">是否有效</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.valid">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
          <Col span="4" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="sendMessage">发送消息</Button>
          </Col>
        </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"  @on-selection-change="selectChange"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="send"
        title="发送消息"
        @on-ok="sendMegok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Input v-model="sendMsgContent" type="textarea" :autosize="{minRows: 5,maxRows: 20}"></Input>
      </Modal>

      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12">   <span class="ModelInputTitle">昵称</span><Input v-model="editForm.nickname" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">姓名</span><Input v-model="editForm.name" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">身份证号</span><Input v-model="editForm.idNumber" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">性别</span><Select   v-model="editForm.sex" style="width: 200px">
          <Option  value="1" >男</Option>
          <Option  value="0" >女</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">年龄</span><Input v-model="editForm.age" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">年龄单位</span><Input v-model="editForm.ageUnit" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">职业</span><Input v-model="editForm.profession" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">手机号</span> <Input v-model="editForm.phone" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">学历</span><Select   v-model="editForm.education" style="width: 200px">
          <Option v-for="e in education"  :value="e.dataCode" :key="e.id" >{{e.dataName}}</Option>
        </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">婚否</span><Select   v-model="editForm.maritalStatus" style="width: 200px">
          <Option  v-for="m in maritalStatus" :value="m.dataCode" :key="m.id">{{m.dataName}}</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">邮箱</span><Input v-model="editForm.email" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">省</span><Select   v-model="editForm.provinceName" style="width: 200px" @on-change="pChange">
          <Option  v-for="p in provinceArr" :value="p.regionCode" :key="p.id">{{p.regionName}}</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">市</span>
            <Select   v-model="editForm.cityName" style="width: 200px"  @on-change="sChange">
              <Option  v-for="c in regionList" :value="c.regionCode" :key="c.id">{{c.regionName}}</Option>
            </Select>
          </Col>
          <Col span="12">   <span class="ModelInputTitle">区</span>
            <Select   v-model="editForm.areaName" style="width: 200px">
              <Option  v-for="a in area" :value="a.regionCode" :key="a.id">{{a.regionName}}</Option>
            </Select>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">详细地址</span><Input v-model="editForm.dtlAddress" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">是否有效</span> <Select   v-model="editForm.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">QQ</span><Input v-model="editForm.qq" style="width: 200px"></Input></Col>
          <Col span="12">   <span class="ModelInputTitle">微信</span> <Input v-model="editForm.wechat" style="width: 200px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">备注</span><Input v-model="editForm.remark" type="textarea" style="width: 485px"></Input></Col>
        </Row>
      </Modal>

      <Modal
        v-model="detector"
        title="产品详情"
        width="600">
        <Table :data="detectorData" :columns="detectorCloums" stripe :loading="detectorLoading"  style="margin-top: 10px"></Table>
        <div slot="footer"></div>
      </Modal>

    </div>
</template>
<script type="text/ecmascript-6">
  import  axios from "axios"
    export default {
        data() {
            return {
              page:1,
              pageSize:10,
              placement:"bottom",
              formInline: {
                nickname:"",
                name:"",
                idNumber:"",
                phone:"",
                sex:"",
                valid:""
              },
              tableData:[],
              loading:true,
              total:0,
              send:false,
              sendMsgContent:"",
              edit:false,
              editForm:{
                nickname:"",
                name:"",
                idNumber:"",
                sex:"",
                age:"",
                ageUnit:"",
                profession:"",
                phone:"",
                education:"",
                maritalStatus:"",
                email:"",
                provinceName:"",
                cityName:"",
                areaName:"",
                dtlAddress:"",
                valid:"",
                qq:"",
                wechat:"",
                remark:"",
                id:""
              },
              cloums:[
                {
                  type: 'selection',
                  width: 35,
                  align:"center"
                },
                {
                  title: '昵称',
                  key: 'nickname',
                  width:120,
                  align:"center"
                },
                {
                  title: '姓名',
                  key: 'name',
                  width:220,
                  align:"center"
                },
                {
                  title: '身份证号',
                  key: 'idNumber',
                  width:180,
                  align:"center"
                },
                {
                  title: '出生年月',
                  key: 'dateBirth',
                  width:150,
                  align:"center"
                },
                {
                  title: '性别',
                  key: 'sex',
                  width:60,
                  align:"center"
                },
                {
                  title: '职业',
                  key: 'profession',
                  width:150,
                  align:"center",
                  profession:"",

                },
                {
                  title: '手机号',
                  key: 'phone',
                  width:150,
                  align:"center"
                },
                {
                  title: '学历',
                  key: 'education',
                  width:80,
                  align:"center"
                },
                {
                  title: '婚否',
                  key: 'maritalStatus',
                  width:100,
                  align:"center"
                },
                {
                  title: '电子邮箱',
                  key: 'email',
                  width:150,
                  align:"center"
                },
                {
                  title: '省',
                  key: 'provinceName',
                  width:100,
                  align:"center"
                },
                {
                  title: '市',
                  key: 'cityName',
                  width:100,
                  align:"center"
                },
                {
                  title: '区',
                  key: 'areaName',
                  width:100,
                  align:"center"
                },
                {
                  title: '详细地址',
                  key: 'dtlAddress',
                  width:200,
                  align:"center"
                },
                {
                  title: 'QQ号',
                  key: 'qq',
                  width:100,
                  align:"center"
                },
                {
                  title: '微信号',
                  key: 'wechat',
                  width:200,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:100,
                  align:"center"
                },
                {
                  title: '备注',
                  key: 'remark',
                  width:180,
                  align:"center"
                },
                {
                  title: '操作',
                  fixed: "right",
                  width:220,
                  align:"center",
                  render: (h, params) => {
                    return h('div', [
                      h('Button', {
                        props: {
                          type: 'error',
                        },
                        style:{
                          marginRight:"5px"
                        },
                        on: {
                          click: () => {
                            console.log(params.row)
                              this.editForm.nickname = params.row.nickname;
                              this.editForm.name = params.row.name;
                              this.editForm.idNumber = params.row.idNumber;
                              this.editForm.sex = params.row.sex=="男"?"1":"0";
                              this.editForm.age = params.row.age;
                              this.editForm.ageUnit = params.row.ageUnit;
                              this.editForm.profession = params.row.profession;
                              this.editForm.phone = params.row.phone;
                              for(var i=0;i<this.education.length;i++){
                                if(params.row.education == this.education[i].dataName){
                                  this.editForm.education = this.education[i].dataCode;
                                }
                              }
                            for(var i=0;i<this.maritalStatus.length;i++){
                              if(params.row.maritalStatus == this.maritalStatus[i].dataName){
                                this.editForm.maritalStatus = this.maritalStatus[i].dataCode;
                              }
                            }
                              this.editForm.email = params.row.email;
                              this.editForm.provinceName = params.row.provinceCd;
                              var qs = require("qs");
                             if(params.row.provinceCd){
                               var param = qs.stringify({
                                 regionCode:params.row.provinceCd
                               });
                               axios.post("/common/regionListByRegionCode",param).then((res)=>{
                                 if(res.data.code =="000000"){
                                   this.regionList = res.data.data;
                                 }else{
                                   this.$Notice.error({title:res.data.msg});
                                 }
                               })
                             }
                              this.editForm.cityName = params.row.cityCd;
                              if(params.row.cityCd){
                                var param = qs.stringify({
                                  regionCode:params.row.cityCd
                                });
                                axios.post("/common/regionListByRegionCode",param).then((res)=>{
                                  if(res.data.code =="000000"){
                                    this.area = res.data.data;
                                  }else{
                                    this.$Notice.error({title:res.data.msg});
                                  }
                                })
                              }
                              this.editForm.areaName = params.row.areaCd;
                              this.editForm.dtlAddress = params.row.dtlAddress;
                              this.editForm.valid = params.row.valid=="是"?"1":"0";
                              this.editForm.qq = params.row.qq;
                              this.editForm.wechat = params.row.wechat;
                              this.editForm.remark = params.row.remark;
                              this.editForm.id = params.row.id;
                              this.edit = true;
                          }
                        }
                      }, '编辑'),
                      h("Button",{
                        props:{
                          type:"primary"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                            var qs = require("qs");
                            var param = qs.stringify({
                              userId:params.row.id
                            })
                            axios.post("userInfo/patientList",param).then((res)=>{
                              console.log(res.data)
                              if(res.data.code =="000000"){
                                if(res.data.data.length==0){
                                  this.$Notice.info({title:"暂无数据"})
                                }else{
                                  this.detector = true;
                                  this.detectorLoading = false;
                                  for(let i = 0;i<res.data.data.length;i++){
                                    res.data.data[i].sex = res.data.data[i].sex=="1"?"男":"女";
                                    res.data.data[i].age = res.data.data[i].age + "岁";
                                  }
                                  this.detectorData = res.data.data;
                                }
                              }else{
                               this.$Notice.error({title:res.data.msg});
                              }
                            })
                          }
                        }
                      },"查看检测人")
                    ]);
                  }
                }
              ],
              provinceArr:[],//省份
              regionList:[],
              area:[],
              education:[],//学历
              maritalStatus:[],//婚姻状态
              selectedItem:[],//选中的数量
              detector:false,//查看检测人模态框
              detectorData:[],
              detectorLoading:true,
              detectorCloums:[
                {
                  title: '检测人姓名',
                  key: 'name',
                  width:150,
                  align:"center"
                },
                {
                  title: '性别',
                  key: 'sex',
                  width:150,
                  align:"center"
                },
                {
                  title: '年龄',
                  key: 'age',
                  width:150,
                  align:"center"
                },
                {
                  title: '电话',
                  key: 'phone',
                  width:250,
                  align:"center"
                },

              ]
            }
        },
      mounted(){
          this.getInfo();
          this.init();
      },
      methods:{
        getInfo(){
            var qs = require("qs");
            axios.post("/common/provinceList").then((res)=>{
              if(res.data.code == "000000"){
                this.provinceArr = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            })
          var param = qs.stringify({
            dictType:"education_type"
          })
          axios.post("/common/dictDataList",param).then((res)=>{
            if(res.data.code == "000000"){
              this.education = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
          var param1 = qs.stringify({
            dictType:"maritalStatus_type"
          })
          axios.post("/common/dictDataList",param1).then((res)=>{
            if(res.data.code == "000000"){
              this.maritalStatus = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        init(){
          var qs = require("qs");
          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            nickname:this.formInline.nickname,
            idNumber:this.formInline.idNumber,
            name:this.formInline.name,
            sex:this.formInline.sex,
            phone:this.formInline.phone,
            valid:this.formInline.valid
          });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/userInfo/queryBusUserInfoListByPage",param).then((res)=>{
            if(res.data.code == "000000"){
                this.loading = false;
                this.total = res.data.count;
                for(let i=0;i<res.data.data.length;i++){
                  if(res.data.data[i].dateBirth){
                    res.data.data[i].dateBirth = this.format(res.data.data[i].dateBirth);
                  }
                 if(res.data.data[i].sex){
                   res.data.data[i].sex = res.data.data[i].sex=="1"?"男":"女";
                 }
                  res.data.data[i].valid = res.data.data[i].valid=="1"?"是":"否";
                  for(let j=0;j<this.education.length;j++){
                    if(res.data.data[i].education==this.education[j].dataCode){
                      res.data.data[i].education = this.education[j].dataName;
                    }
                  }
                  for(let k=0;k<this.maritalStatus.length;k++){
                    if(res.data.data[i].maritalStatus==this.maritalStatus[k].dataCode){
                      res.data.data[i].maritalStatus = this.maritalStatus[k].dataName;
                    }
                  }
                }
                this.tableData = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          });
        },
        onSubmit(){
          this.init();
        },
        resetForm(){
          this.formInline.nickname = "";
          this.formInline.idNumber = "";
          this.formInline.name = "";
          this.formInline.sex = "";
          this.formInline.phone = "";
          this.formInline.valid = "";
          this.page = 1;
          this.pageSize = 10;
        },
        sendMessage(){
          if(this.selectedItem.length<=0){
            this.$Notice.error({title:"请至少选择一条发送消息对象"});
            return false;
          }else{
            this.send = true;
          }
        },
        sendMegok(){
          var ids = "";
          for(var i=0;i<this.selectedItem.length;i++){
            ids+=this.selectedItem[i].id+",";
          }
        var qs = require("qs");
        var param = qs.stringify({
          ids:ids,
          msgContent:this.sendMsgContent
        })
          axios.post("/msg/addBusMsgRecordByWxUserInfo",param).then((res)=>{
              if(res.data.code =="000000"){
                this.$Notice.success({title:"发送成功"});
                this.init();
              }else{
                this.$Notice.error({title:res.data.msg});
              }
          })
        },
        selectChange(change){
          this.selectedItem = change;
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        format(date){
          var d = new Date(date);
          var year = d.getFullYear();
          var month = parseInt(d.getMonth())+1>9?parseInt(d.getMonth())+1:"0"+(parseInt(d.getMonth())+1);
          var day = d.getDate()>9?d.getDate():"0"+d.getDate();
          return year+"-"+month+"-"+day;
        },
        editok(){
          var qs = require("qs");
          var param = qs.stringify({
            provinceCd:this.editForm.provinceName,
            cityCd:this.editForm.cityName,
            areaCd:this.editForm.areaName,
            dtlAddress:this.editForm.dtlAddress,
            nickname:this.editForm.nickname,
            idNumber:this.editForm.idNumber,
            age:this.editForm.age,
            ageUnit:this.editForm.ageUnit,
            sex:this.editForm.sex,
            profession:this.editForm.profession,
            pfsTitle:this.editForm.nickName,
            phone:this.editForm.phone,
            education:this.editForm.education,
            maritalStatus:this.editForm.maritalStatus,
            telephone:"",
            email:this.editForm.email,
            postcode:"",
            remark:this.editForm.remark,
            qq:this.editForm.qq,
            wechatOpenid:"",
            wechat:this.editForm.wechat,
            valid:this.editForm.valid,
            id:this.editForm.id
          });
          axios.post("/userInfo/updateUser",param).then((res)=>{
            if(res.data.code == "000000"){
              this.$Notice.success({title:"编辑成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        //省
        pChange(p){
          console.log(p)
          if(p){
            var qs = require("qs");
            var param = qs.stringify({
              regionCode:p
            })
            axios.post("/common/regionListByRegionCode",param).then((res)=>{
              if(res.data.code == "000000"){
                this.regionList = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            });
          }
        },
        //市
        sChange(s){
          if(s){
            var qs = require("qs");
            var param = qs.stringify({
              regionCode:s
            })
            axios.post("/common/regionListByRegionCode",param).then((res)=>{
              if(res.data.code == "000000"){
                this.area = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            });
          }
        },
      }
    }
</script>
